<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head> 
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  <title>启元审批通过率情况</title> 
  <style type="text/css">
    *{ margin:0px; padding:0px;}
     #menu{ background-color:#eee; width:450px; height:40px; margin:0 auto;}
     ul{ list-style:none;}
     ul li{ float:left;  line-height:40px; text-align:center; position:relative;}
     a{ text-decoration:none; color:#000; display:block; width:90px;}
     a:hover{ color:#FFF; background-color:#666;}
     ul li ul li{ float:none; border-left:none; margin-top:2px; background-color:#eee; }
     ul li ul li ul{ float:none; border-left:none; margin-top:2px; background-color:#eee; }
     ul li ul{  width:90px; position:absolute; left:0px; top:40px; display:none;}

    .data{
        height:400px;
        width:600px;
        border:green solid 1.5px;
        margin:0 auto;
        top: 0px;
        left: 0px;
        right: 0px;
        bottom: 0px;
        margin-top:200px;#设置两个div之间间距
        margin-bottom:20px;#设置两个div之间间距
        position:absolute;
        margin-left:200px;
        padding:10px;
    }
    .moreroom{
        height:40px;
        width:1200px;
        #border:green solid 1.5px;
        margin-top: 1200px;
        position: absolute;
        left:20%;
    }
    .myinfo{width:100px; height:30px; position:fixed; _position:absolute; right:30px; top:30px; padding:4px;}
    </style>
  <div id="moreroom" class="moreroom"></div>
  <script type="text/javascript" src="/static/js/jquery-1.9.1.js"></script>
  <script type="text/javascript">
  $(function(){
	 $(".navmenu").mouseover(function(){
		 $(this).children("ul").show();		 		 
		 })
	 $(".navmenu").mouseout(function(){		 
		 $(this).children("ul").hide();		 
		 })	  
	  })  
</script>

 </head> 
 <body> 
  <div id="menu"> 
   <ul> 
   
    <li class="navmenu"><a href="#">统计报表</a> 
     <ul> 
      <li><a href="http://172.16.3.119:9999/login">月报</a></li> 
      <li><a href="#">周报</a></li> 
     </ul> </li> 
     
    <li class="navmenu"><a href="#">运营数据</a> 
     <ul> 
      <li><a href="http://172.16.3.119:9999/Oper/approvalPassRate">审批通过率</a></li> 
      <li><a href="http://172.16.3.119:9999/Oper/approvalCnt">进件量</a></li> 
      <li><a href="http://172.16.3.119:9999/Oper/approvalPer">平均放款额</a></li> 
      <li><a href="http://172.16.3.119:9999/Oper/approvalLoan">放款额</a></li>
      <li><a href="http://172.16.3.119:9999/Oper/approvalAmount">叠加图</a></li>
     </ul> </li> 
     
    <li class="navmenu"><a href="#">风控数据</a> 
     <ul> 
      <li><a href="#">账龄分析</a></li> 
     </ul> </li> 
    <li class="navmenu"><a href="#">财务数据</a> 
     <ul> 
      <li><a href="#">客户还款表</a></li> 
     </ul> </li> 
    <li class="navmenu"><a href="#">关于我们</a></li> 
   </ul> 
  </div> 
    <div id="myinfo" class="myinfo"> 
   <ul> 
    <li class="myinfo"><a href="http://172.16.3.119:9999/logout">退出登录</a></li> 
    </li>
   </ul> 
  </div> 
  <script type="text/javascript" src="/static/js/jquery-1.9.1.js"></script> 
  <script type="text/javascript" src="/static/js/echarts.js"></script> 
  <script type="text/javascript" src="/static/js/china.js"></script>
  
  {% for item in data  %}      
        {% if item['show'] %}             
            <div id="{{ item['key'] }}" class="data"></div>
            <!-- 时间轴单位-{{ item['value'] }}-->
            <script type="text/javascript">
                // 基于准备好的dom，初始化echarts实例
                var myChart = echarts.init(document.getElementById("{{ item['key'] }}"));  
                
                function randomData() {
                    return Math.round(Math.random()*1000);
                }
                
                var dateStr = "{{ item['x'] }}";
                var xAxisList = dateStr.split(';');
                var xAxisData = [];

                xAxisList.forEach(function (element) {
                    xAxisData.push(element);
                });
                                
                option = {
                    title: {
                        text: '放款-{{ item['value'] }}'
                    },
                    tooltip : {
                        trigger: 'axis',
                        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                        }
                    },
                    toolbox: {
                        feature: {
                            dataView: {show: true, readOnly: false},
                            magicType: {show: true, type: ['line', 'bar']},
                            restore: {show: true},
                            saveAsImage: {show: true}
                        }
                    },                    
                    legend: {
                        data:['成功人数','失败人数']
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis : [
                        {
                            type : 'category',
                            data : xAxisData
                        }
                    ],
                    yAxis : [
                        {
                            type : 'value'
                        }
                    ],
                    series : [
                        {
                            name:'成功人数',
                            type:'bar',
                            stack: '放款',
                            data:{{ item['succUsers'] }}
                        },
                        {
                            name:'失败人数',
                            type:'bar',
                            stack: '放款',
                            data:{{ item['failUsers']}}
                        }
 
                    ]
                };
                // 使用刚指定的配置项和数据显示图表。  
                myChart.setOption(option);   
            </script>
        {% endif  %}               
   {% endfor %}
   
   {% if len == 4 %}
    <style type="text/css">
        #{{ showList[0] }},#{{ showList[1] }}{float:left;}
        #{{ showList[2] }},#{{ showList[3] }}{float:left;margin-top:60px;}
    <style>
    {% endif %}
    
   {% if len == 3 %}
    <style type="text/css">
        #{{ showList[0] }},#{{ showList[1] }}{float:left;}
        #{{ showList[2] }}{float:left;border:green solid 1.5px;margin-top:60px;}
    <style>
    {% endif %}
    
   {% if len == 2 %}
    <style type="text/css">
        #{{ showList[0] }},#{{ showList[1] }}{float:left;}
    <style>
    {% endif %}
    
    {% if len == 1 %}
    <style type="text/css">
        #{{ showList[0] }}{float:left;border:green solid 1.5px;margin-top:300px;left:20%;}
    <style>
    {% endif %}   
 </body>
</html>